<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" class="className" :style="{ width: width, height: height }" />
    <div style="border: 1px solid rgb(0, 0, 0); width: 80%; margin-left: 100px;">
      <el-row>
        <el-col
          :span="6"
        >
          <div style="margin-left: 10px">
            CF : {{ this.d_cf }}
          </div>
        </el-col
        >
        <el-col
          :span="6"
        >
          <div style="margin-left: 10px">
            SPAN : {{ this.d_span }}
          </div>
        </el-col>
        <el-col
          :span="6"
        >
          <div style="margin-left: 10px">
            RBW : {{ this.d_rbw }}
          </div>
        </el-col
        >
        <el-col
          :span="6"
        >
          <div style="margin-left: 10px">
            VBW : {{ this.d_vbw }}
          </div>
        </el-col>
      </el-row>
      <el-row>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getTaskTrace } from "@/api/weixing/task";
import { getToken } from "@/utils/auth";

export default {
  name: "TraceData",
  props: {
    taskID: {
      type: String,
      default: "",
    },
    code: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "50%",
    },
    height: {
      type: String,
      default: "50%",
    },
    taskDefineStepList: {
      type: Array,
      default: null,
    },
    d_cf: {
      type: String,
      default: ''
    },
    d_span: {
      type: String,
      default: ''
    },
    d_rbw: {
      type: String,
      default: ''
    },
    d_vbw: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      px: false,
      inputValds: [],
      numx: 0,

      chart: null,
      options: {
        color: ["#5470C6", "#EE6666"],

        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
          },
        },

        grid: {
          top: 70,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            smooth: true,
            // max: 200,
            // min: 0,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#5470C6",
              },
            },

            data: [],
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              onZero: false,

              lineStyle: {
                color: "#EE6666",
              },
            },

            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            splitNumber: 5,
          },
        ],
        series: [
          {
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            // max: 200,
            // min: 0,
            splitNumber: 5,

            emphasis: {
              focus: "series",
            },
            data: [],
          },
          {
            type: "line",
            smooth: true,
            // max: 200,
            // min: 0,
            splitNumber: 5,
            emphasis: {
              focus: "series",
            },
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let num = 0;
      const taskID = this.taskID;
      const options = this.options;
      let chart = this.chart;
      const id = this.id;
      const span = Number(this.d_span)
      let cf = Number(this.d_cf)
      const _this = this
      this.taskDefineStepList.forEach(async function(element, index) {
        if (element.code !== null && element.autoType === 3) {
          console.log(taskID)
          const { header, body } = await getTaskTrace({
            token: getToken(),
            taskID: taskID,
            code: element.code
          })
          console.log(num)
          const traceData = body.trace
          const len = traceData.length - 1
          const interval = span / len
          const xData1 = []
          const xData2 = []

          console.log(cf, span)
          // alert(len)
          // alert(interval)
          cf = Number(_this.d_cf)
          for (let i = len / 2; i > 0; i--) {
            xData1.push(Math.floor(cf -= interval))
            // console.log(i, len / 2)
            // _this.$message x({ message: i + '/' + (len / 2), type: 'info' })
          }
          cf = Number(_this.d_cf)
          xData2.push(Math.floor(cf))
          for (let i = 0; i < len / 2; i++) {
            xData2.push(Math.floor(cf += interval))
            // console.log(i, len / 2)
            // _this.$message({ message: i + '/' + (len / 2), type: 'info' })
          }
          console.log(xData1)
          console.log(xData2)
          options.xAxis[num].data = xData1.reverse().concat(xData2)
          options.series[num].data = traceData
          console.log(traceData)
          // options.xAxis[num].data = traceDatavb

          num = num + 1

          chart = echarts.init(document.getElementById(id));
          chart.setOption(options);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
